<script lang="ts" setup>
  import { ref } from 'vue';
  import GameGroupTable from './game-group-table.vue';
  import EnrollType from './enroll-type.vue';

  const props = defineProps<{
    gameId: string;
    disableGroup?: boolean;
  }>();

  const curApp = ref(props.disableGroup ? 'enrollType' : 'group');
</script>

<template>
  <div>
    <a-divider>
      <a-radio-group
        v-model="curApp"
        type="button"
        :options="[
          {
            label: '分组',
            value: 'group',
            disabled: props.disableGroup === true,
          },
          { label: '组别', value: 'enrollType' },
        ]"
      />
    </a-divider>

    <GameGroupTable v-if="curApp === 'group'" :game-id="gameId" />

    <EnrollType v-else-if="curApp === 'enrollType'" :game-id="gameId" />
  </div>
</template>
